<template>
  <Modal
    ref="modalRef"
    @register="modalForm"
    :title="title"
    :width="650"
    @confirm="!isEdit ? hdlCreate(dataFormRef) : hdlUpdate(dataFormRef)"
  >
    <template #default>
      <el-form ref="dataFormRef" :model="dataForm" :rules="rules" label-width="auto">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="dataForm.name" placeholder="请输入部门名称" />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="dataForm.code" placeholder="请输入部门编码" />
        </el-form-item>
        <el-form-item label="上级部门">
          <el-date-picker
            v-model="dataForm.parentId"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="排序" prop="sort">
          <el-input v-model="dataForm.sort" placeholder="数字越大，排名越靠前" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="dataForm.status">
            <el-radio :value="1">正常</el-radio>
            <el-radio :value="0">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="note">
          <el-input v-model="dataForm.note" type="textarea" placeholder="请输入备注" clearable />
        </el-form-item>
      </el-form>
    </template>
  </Modal>
</template>

<script lang="ts" setup>
  import { ref, reactive } from 'vue';
  import { Modal, useModal } from '@/design/components/Modal';
  import type { FormInstance } from 'element-plus';
  import { ElMessage } from 'element-plus';
  import api from '@/api/system/dept';

  // 组件属性
  const props = defineProps({
    title: {
      type: String,
      default: '默认标题',
    },
    isEdit: {
      type: Boolean,
      default: false,
    },
    record: {
      type: Object,
      default: () => ({}),
    },
  });

  const dataFormRef = ref<FormInstance>();
  // 获取表单标题
  const title = ref(props.title);
  const record = ref(props.record);
  console.log('record 2', props.record);
  let dataForm = reactive({
    parentId: '',
    name: '',
    code: '',
    sort: 0,
    status: 1,
    note: '',
  });
  dataForm = { ...dataForm, ...record.value };
  console.log(dataForm);

  const rules = reactive({
    name: [{ required: true, message: '请输入部门名称', trigger: 'blur' }],
    code: [{ required: true, message: '请输入部门编码', trigger: ['blur', 'change'] }],
  });

  // 设置弹窗
  const [modalForm, { openModal, closeModal, setSubLoading, setProps }] = useModal({});

  async function hdlCreate(formEl: FormInstance | undefined) {
    if (!formEl) return;
    await formEl.validate(async (valid) => {
      if (valid) {
        try {
          await api.create(dataForm);
          ElMessage.success('创建成功');
          closeModal();
        } catch (err) {}
      }
      setSubLoading(false);
    });
  }

  async function hdlUpdate(formEl: FormInstance | undefined) {
    if (!formEl) return;
    await formEl.validate(async (valid) => {
      if (valid) {
        try {
          await api.update(dataForm);
          ElMessage.success('更新成功');
          closeModal();
        } catch (err) {}
      }
      setSubLoading(false);
    });
  }

  //导出方法
  defineExpose({
    // 弹窗事件
    openModal,
    closeModal,
    setProps,
    setSubLoading,
  });
</script>
